<template>
  <div
    v-if="data"
    class="flc text-14px absolute left-0 text-white box-border w-screen bottom-110px text-center z-200"
  >
    <div
      class="relative text-[13px]"
      :class="$style.wrapper"
    >
      <icon-font
        name="text-arrow"
        class="absolute top-[3.5px] left-[16px] transform scale-50   z-2"
      ></icon-font>
      <div
        class="relative py-[4px] px-[34px] inline-block"
        :class="$style.text"
      >
        <div class="z-1 relative">
          {{ shakeWord }}
          <span
            class="inline-block w-[1px] bg-white h-[13px] align-bottom ml-2px"
            :class="$style.blink"
          ></span>
        </div>
      </div>
      <icon-font
        name="text-arrow"
        class="absolute top-[3.5px] right-[16px]  z-2 transform rotate-180 scale-50"
      ></icon-font>
    </div>
  </div>
</template>

<script
  lang="ts"
  setup
  name="XSubtitle"
>
import useSubtitle from './hook'

const props = defineProps(['data'])
const { shakeWord } = useSubtitle(props)

</script>

<style
  module
  lang="scss"
>
@keyframes blink {
  0% {
    background-color: white;
  }

  50% {
    background-color: transparent;
  }

  100% {
    background-color: white;
  }
}

.blink {
  animation: blink 1s infinite steps(1, start);
}

.text {
  background: linear-gradient(90deg, rgba(21, 75, 125, 0.15) 0%, rgba(21, 75, 125, 0.66) 48%, rgba(21, 75, 125, 0.15) 100%);
  border-radius: 22px;
  position: relative;

  &::after {
    @apply backdrop-blur-10px backdrop-filter h-full w-full top-0 left-0 z-0;
    content: '';
    position: absolute;
    border-radius: 22px;
    overflow: hidden;

  }
}

.wrapper {

  /* &::before,
  &::after {
    content: '';
    display: block;
    width: 3px;
    height: 3px;
    background: #4673EE;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }

  &::before {
    left: 13px;
  }

  &::after {
    right: 13px;
  } */
}
</style>
